<template>
  <div class="hot">
    <div class="hot-top">
      <img
        src="//m.360buyimg.com/babel/s750x88_jfs/t1/174011/25/971/3545/6061756cEb44f2ab0/2b1b26fcdf1a3cae.png.webp"
        alt=""
      />
    </div>
    <ul class="hot-list">
      <li class="hot-item" v-for="item in hotList" :key="item.id">
        <img :src="item.imgUrl" :alt="item.title" />
        <p>{{ item.title }}</p>
        <p>
          <span class="hot-mark">￥{{ item.mark }}</span
          >起
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotList: [
        {
          id: '01',
          imgUrl: '//m.360buyimg.com/babel/s200x237_jfs/t1/144004/10/24848/75208/61c574beE4b871f6f/5ad890d652e864e6.png',
          title: '索尼',
          mark: 20
        }, {
          id: '02',
          imgUrl: '//m.360buyimg.com/babel/s200x237_jfs/t1/144004/10/24848/75208/61c574beE4b871f6f/5ad890d652e864e6.png',
          title: '湿度巨龙浅碗玻璃栈道',
          mark: 18
        }, {
          id: '03',
          imgUrl: '//m.360buyimg.com/babel/s200x237_jfs/t1/144004/10/24848/75208/61c574beE4b871f6f/5ad890d652e864e6.png',
          title: '故宫',
          mark: 100
        }, {
          id: '04',
          imgUrl: '//m.360buyimg.com/babel/s200x237_jfs/t1/144004/10/24848/75208/61c574beE4b871f6f/5ad890d652e864e6.png',
          title: '人民大会堂',
          mark: 42
        }, {
          id: '05',
          imgUrl: '//m.360buyimg.com/babel/s200x237_jfs/t1/144004/10/24848/75208/61c574beE4b871f6f/5ad890d652e864e6.png',
          title: '八达岭长城',
          mark: 25
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.hot {
  background: #fff;
  font-size: 0.28rem;
  .hot-top {
    img {
      width: 100%;
    }
  }
  .hot-list {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    .hot-item {
      display: inline-block;
      width: 2rem;
      padding: 0.1rem 0.2rem;
      img {
        width: 100%;
      }
      p {
        text-align: center;
        margin-top: 0.1rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        .hot-mark {
          color: #ff8300;
          font-size: 0.32rem;
        }
      }
    }
  }
}
</style>
